<template>
	<view class="view-root">
		<view class="title-bg-wrap">
			<image src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_coin.png"></image>
		</view>
		<view class="content-root">
			<view class="title-wrap">
				<view class="withdraw-record-btn"
					@click="gotoRouter('/pages-agencies/withdrawList/withdrawList?busType=' + busType)">提现记录</view>
				<view class="available-notice-wrap">
					<view class="available-amount">{{ shareStats.usableMoney }}</view>
					<view class="available-notice">可提现金额</view>
				</view>
				<view class="withdraw-btn"
					@click="gotoRouter('/pages-agencies/WithdrawRequest/WithdrawRequest?amount=' + shareStats.usableMoney + '&busType=' + busType)">
					提现</view>
			</view>
			<view class="stats-panel">
				<view class="stats-wrap">
					<view class="stats-title">注册人数</view>
					<view class="stats-data">{{ shareStats.registerCount }}</view>
				</view>
				<view class="stats-wrap">
					<view class="stats-title">销售数量</view>
					<view class="stats-data">{{ shareStats.payCount }}</view>
				</view>
				<view class="stats-wrap">
					<view class="stats-title">消费金额</view>
					<view class="stats-data">{{ shareStats.payMoneyTotal }}</view>
				</view>
				<view class="stats-wrap">
					<view class="stats-title">总计佣金</view>
					<view class="stats-data">{{ shareStats.disMoneyTotal }}</view>
				</view>
			</view>
			<view class="filter-panel">
				<picker mode="date" :value="dateFilter" fields="month" start="2021-1" :end="endDate"
					@change="bindDateChange">
					<view class="time_choose">
						<view class="uni-input">{{ dateFilter }}</view>
						<image
							src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/agencies/arrow_list.png">
						</image>
					</view>
				</picker>
				<view class="tab-wrap">
					<u-tabs v-model="activeTab" :scroll="false" :tabs="['注册用户', '消费明细']" @change="tabChange"></u-tabs>
				</view>
			</view>

			<scroll-view class="list-scroll" scroll-y="true" @scrolltolower="loadMore()">
				<view style="display:flex; flex-direction:column" v-if="activeTab == 0">
					<view class="user-card" v-for="(user, index) in userList" :key="index">
						<image :src="user.picture"></image>
						<view class="content-wrap">
							<view class="user-name">{{ user.userName }}</view>
							<view class="register-time">{{ user.createdTime }}</view>
						</view>
					</view>
				</view>
				<view style="display:flex; flex-direction:column" v-if="activeTab == 1">
					<view class="user-card_2" v-for="(record, index) in recordList" :key="index">
						<!-- <view class="user-card_2"> -->
						<view class="tatel">
							<view>订单：{{ record.orderCode || '无' }}</view>
							<view :style="'color:' + businessTypeColoreArr[record.orderType - 1]">{{
									businessTypeArr[record.orderType - 1]
							}}</view>
						</view>
						<view class="image_txt-wrap">
							<view>
								<image :src="record.picture" mode="scaleToFill" />
							</view>
							<view class="txt-content">
								<view>昵称：{{ record.userName }}</view>
								<view>{{ record.createdTime }}</view>
							</view>
							<view class="txt-right">
								<view>￥{{ record.payMoney }}</view>
								<view>佣金：<span>￥{{ record.disMoney }}</span></view>
							</view>

						</view>
						<!-- <view>
							<image :src="record.picture"></image>
							<view class="content-wrap">
								<view class="user-name">{{ record.userName }}</view>
								<view class="register-time">{{ record.createdTime }}</view>
							</view>
						</view> -->
					</view>
				</view>

				<view
					v-if="(activeTab == 0 && userList.length > 0 && userList.length == totalSize) || (activeTab == 1 && recordList.length > 0 && recordList.length == totalSize)"
					class="end-line">～我是有底线的呢～</view>
				<view style="height: 40rpx;"></view>
			</scroll-view>
			<view class="empty-view"
				v-if="(activeTab == 0 && userList.length == 0) || (activeTab == 1 && recordList.length == 0)">
				<u-empty-state value="暂无内容"></u-empty-state>
			</view>
		</view>
	</view>
</template>

<script>
import uTab from '@/components/u-tabs/u-tabs.vue';
import uEmptyState from '@/components/u-empty-state/u-empty-state.vue';
export default {
	components: {
		uTab,
		uEmptyState
	},
	data() {
		return {
			busType: '',
			dateFilter: '',
			endDate: '',
			activeTab: 0,
			totalSize: 0,
			currPage: 1,
			pageSize: 20,
			userList: [],
			recordList: [],
			shareStats: {
				"registerCount":0,
				"usableMoney":"0.00",
				"payCount":0,
				"disMoneyTotal":"0.00",
				"hasWithdrawMoney":"0.00",
				"payMoneyTotal":"0.00"
			},
			businessTypeArr: ['图文问诊订单', '视频问诊订单', '开药问诊订单', '药品订单', '其他订单', '手动操作', '提现'],
			businessTypeColoreArr: ['#FF9660', '#6E99C7', '#6EF5F9', '#24E104', '#FC4E4C', '#FC4E4C', '#FC4E4C']
		};
	},
	onLoad(options) {
		this.dateFilter = this.getDate({
			format: true
		});
		this.endDate = this.dateFilter;
		this.busType = options.busType || 0
	},
	onShow() {
		this.queryStatsData();
		this.queryList();
	},
	methods: {
		tabChange(e) {
			this.activeTab = e;
			this.queryList();
		},
		bindDateChange(e) {
			this.dateFilter = e.detail.value;
			this.queryList();
		},
		getDate() {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			month = month > 9 ? month : '0' + month;
			return `${year}-${month}`;
		},
		queryStatsData() {
			this.$api.getDistributeStats({}).then(res => {
				if (res.code == 200) {
					this.shareStats = res.result;
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			})
		},
		//药品列表
		queryList() {
			this.currPage = 1;
			if (this.activeTab == 0) {
				this.$api
					.getDistributeUsers({
						params: {
							pageNo: this.currPage,
							pageSize: this.pageSize,
							monthDate: this.dateFilter
						}
					})
					.then(res => {
						if (res.code == 200) {
							this.userList = res.result.records;
							this.totalSize = res.result.total;
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					});
			} else {
				this.$api
					.getDistributeOrders({
						params: {
							pageNo: this.currPage,
							pageSize: this.pageSize,
							monthDate: this.dateFilter
						}
					})
					.then(res => {
						if (res.code == 200) {
							this.recordList = res.result.records;
							this.totalSize = res.result.total;
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					});
			}

		},

		loadMore() {
			if (this.activeTab == 0) {
				if (this.totalSize > this.userList.length) {
					this.$api.getDistributeUsers({
						params: {
							pageNo: this.currPage + 1,
							pageSize: this.pageSize,
							monthDate: this.dateFilter
						}
					}).then(res => {
						if (res.code == 200) {
							this.userList = this.userList.concat(res.result.records);
							this.totalSize = res.result.total;
							this.currPage = res.result.current;
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					})
				}
			} else {
				if (this.totalSize > this.recordList.length) {
					this.$api.getDistributeOrders({
						params: {
							pageNo: this.currPage + 1,
							pageSize: this.pageSize,
							monthDate: this.dateFilter
						}
					}).then(res => {
						if (res.code == 200) {
							this.recordList = this.recordList.concat(res.result.records);
							this.totalSize = res.result.total;
							this.currPage = res.result.current;
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					})
				}
			}

		}
	}
}
</script>

<style lang="less" scoped>
@import './myHealthCoins.less';
</style>
